<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片粘贴测试</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body class="bg-gray-50 p-8">
    <div class="max-w-4xl mx-auto">
        <h1 class="text-3xl font-bold text-gray-900 mb-8">图片粘贴功能测试</h1>
        
        <!-- 测试说明 -->
        <div class="bg-blue-50 border border-blue-200 rounded-lg p-6 mb-8">
            <h2 class="text-lg font-semibold text-blue-900 mb-4">测试步骤：</h2>
            <ol class="list-decimal list-inside space-y-2 text-blue-800">
                <li>复制一张图片到剪贴板（可以从网页、截图工具等）</li>
                <li>点击下面的上传区域使其获得焦点</li>
                <li>按 Ctrl+V (Windows) 或 Cmd+V (Mac) 粘贴图片</li>
                <li>查看图片是否成功显示在预览区域</li>
            </ol>
        </div>
        
        <!-- 上传区域 -->
        <div class="bg-white rounded-lg shadow-sm border p-6 mb-8">
            <h3 class="text-lg font-medium text-gray-900 mb-4">图片上传区域</h3>
            
            <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-blue-400 hover:bg-blue-50 transition-all duration-200 focus-within:ring-2 focus-within:ring-blue-500" 
                 id="imageDropZone" tabindex="0">
                <div class="space-y-4">
                    <svg class="mx-auto h-16 w-16 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                        <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                    <div class="space-y-2">
                        <div class="text-lg font-medium text-gray-700">点击此处并粘贴图片</div>
                        <div class="text-sm text-gray-600">
                            <span class="font-medium text-blue-600">Ctrl+V</span>
                            <span class="mx-2">或</span>
                            <span class="font-medium text-blue-600">Cmd+V</span>
                        </div>
                        <div class="text-sm text-gray-500">
                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4"></path>
                                </svg>
                                支持剪贴板粘贴
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 图片预览区域 -->
        <div class="bg-white rounded-lg shadow-sm border p-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">图片预览</h3>
            <div id="imagePreview" class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div class="text-center text-gray-500 py-8">
                    暂无图片
                </div>
            </div>
        </div>
        
        <!-- 调试信息 -->
        <div class="mt-8 bg-gray-100 rounded-lg p-4">
            <h3 class="text-lg font-medium text-gray-900 mb-2">调试信息</h3>
            <div id="debugInfo" class="text-sm text-gray-600 font-mono">
                等待粘贴事件...
            </div>
        </div>
    </div>

    <script>
        let uploadedImages = [];

        $(document).ready(function() {
            // 剪贴板粘贴事件
            $(document).on('paste', function(e) {
                console.log('Paste event detected');
                updateDebugInfo('检测到粘贴事件');
                
                const clipboardData = e.originalEvent.clipboardData;
                if (clipboardData && clipboardData.items) {
                    updateDebugInfo(`剪贴板项目数量: ${clipboardData.items.length}`);
                    
                    for (let i = 0; i < clipboardData.items.length; i++) {
                        const item = clipboardData.items[i];
                        updateDebugInfo(`项目 ${i + 1} 类型: ${item.type}`);
                        
                        if (item.type.indexOf('image') !== -1) {
                            const file = item.getAsFile();
                            if (file) {
                                updateDebugInfo(`找到图片文件: ${file.name}, 大小: ${file.size} bytes`);
                                handleFiles([file]);
                            }
                        }
                    }
                } else {
                    updateDebugInfo('剪贴板数据为空或不可访问');
                }
            });
            
            // 点击上传区域获得焦点
            $('#imageDropZone').click(function() {
                $(this).focus();
                updateDebugInfo('上传区域已获得焦点，可以粘贴图片');
            });
        });
        
        function handleFiles(files) {
            updateDebugInfo(`处理 ${files.length} 个文件`);
            
            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                updateDebugInfo(`处理文件: ${file.name}, 类型: ${file.type}, 大小: ${file.size}`);
                
                if (file.type.startsWith('image/')) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        const imageData = {
                            file: file,
                            dataUrl: e.target.result,
                            id: Date.now() + Math.random()
                        };
                        uploadedImages.push(imageData);
                        updateImagePreview();
                        updateDebugInfo(`成功添加图片: ${file.name}`);
                    };
                    reader.readAsDataURL(file);
                } else {
                    updateDebugInfo(`跳过非图片文件: ${file.name}`);
                }
            }
        }
        
        function updateImagePreview() {
            const container = $('#imagePreview');
            
            if (uploadedImages.length === 0) {
                container.html('<div class="text-center text-gray-500 py-8">暂无图片</div>');
                return;
            }
            
            container.empty();
            
            uploadedImages.forEach(function(imageData) {
                const imageElement = $(`
                    <div class="relative group">
                        <img src="${imageData.dataUrl}" alt="预览" 
                             class="w-full h-32 object-cover rounded-lg border">
                        <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-all duration-200 rounded-lg flex items-center justify-center">
                            <button class="opacity-0 group-hover:opacity-100 bg-red-600 hover:bg-red-700 text-white px-2 py-1 rounded text-xs remove-image-btn" 
                                    data-image-id="${imageData.id}">
                                删除
                            </button>
                        </div>
                        <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 text-white text-xs p-1 rounded-b-lg">
                            ${imageData.file.name}
                        </div>
                    </div>
                `);
                container.append(imageElement);
            });
        }
        
        // 删除图片
        $(document).on('click', '.remove-image-btn', function() {
            const imageId = $(this).data('image-id');
            uploadedImages = uploadedImages.filter(img => img.id !== imageId);
            updateImagePreview();
            updateDebugInfo(`删除图片，剩余: ${uploadedImages.length}`);
        });
        
        function updateDebugInfo(message) {
            const timestamp = new Date().toLocaleTimeString();
            const debugDiv = $('#debugInfo');
            const currentInfo = debugDiv.html();
            debugDiv.html(`${timestamp}: ${message}<br>${currentInfo}`);
        }
    </script>
</body>
</html>
